<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-blue" :isBack="true">
				<block slot="content">合同详情</block>
			</cu-custom>
			
				<view style="padding-bottom: 50rpx;">
					<template v-if="type==1">
						<view>
							<view class="flex flex-direction box">
								<view class="title">
									<view class="" style="font-family: '宋体';">
										<text class="text-black title text-bold text-xl">{{'土地厂房购买费计划收款'}} </text>
									</view>
								</view>
							</view>
							<scrollYBox styleText="height: 85vh;" @scrolltolower="loadMore" @handleRefresher="handleRefresher" :list="list">
								<template style="padding-bottom: 50rpx;">
									<view class="flex flex-direction box"  v-for="(item,index) in list" :key="index">
											<view class="row flex">
												<view class="item flex flex-direction">
													<view class="label">
														收款日期
													</view>
													<view class="val">
														{{item.fkrq}}
													</view>
												</view>
												<view class="item flex flex-direction">
													<view class="label">
														单价
													</view>
													<view class="val">
														{{item.dj}}
													</view>
												</view>
											</view>
											<view class="row flex">
												<view class="item flex flex-direction">
													<view class="label">
														总金额
													</view>
													<view class="val">
														{{item.zjg}}
													</view>
												</view>
												<view class="item flex flex-direction">
													<view class="label">
														支付比例
													</view>
													<view class="val">
														{{item.zfbl}}
													</view>
												</view>
											</view>
											<view class="row flex">
												<view class="item flex flex-direction">
													<view class="label">
														支付金额
													</view>
													<view class="val">
														{{item.zfjg}}
													</view>
												</view>
												<view class="item flex flex-direction">
													<view class="label">
														备注
													</view>
													<view class="val">
														{{item.bz}}
													</view>
												</view>
											</view>
									</view>
								</template>
							</scrollYBox>	
						</view>
					</template>
					
					<template v-if="type==2">
						<view>
								<view class="flex flex-direction box">
									<view class="title">
										<view class="" style="font-family: '宋体';">
											<text class="text-black title text-bold text-xl">{{'土地厂房购买费实际收款'}} </text>
										</view>
									</view>
								</view>
								<scrollYBox styleText="height: 85vh;" @scrolltolower="loadMore" @handleRefresher="handleRefresher" :list="list">
									<template style="padding-bottom: 50rpx;">
										<view class="flex flex-direction box" v-for="(item,index) in list" :key="index">
											<view class="row flex">
												<view class="item flex flex-direction">
													<view class="label">
														收款单号
													</view>
													<view class="val">
														{{item.code}}
													</view>
												</view>
												<view class="item flex flex-direction">
													<view class="label">
														收款日期
													</view>
													<view class="val">
														{{item.sfrq}}
													</view>
												</view>
											</view>
											<view class="row flex">
												<view class="item flex flex-direction">
													<view class="label">
														收款金额
													</view>
													<view class="val">
														{{item.yfjg}}
													</view>
												</view>
												<view class="item flex flex-direction">
													<view class="label">
														票据号码
													</view>
													<view class="val">
														{{item.pjhm}}
													</view>
												</view>
											</view>
											<view class="row flex">
												<view class="item flex flex-direction">
													<view class="label">
														币制
													</view>
													<view class="val">
														{{item.pz}}
													</view>
												</view>
												<view class="item flex flex-direction">
													<view class="label">
														备注
													</view>
													<view class="val">
														{{item.bz}}
													</view>
												</view>
											</view>
										</view>
									</template>
								</scrollYBox>
						</view>
					</template>
					
					<template v-if="type==3">
						<view>
							<view class="flex flex-direction box">
								<view class="title">
									<view class="" style="font-family: '宋体';">
										<text class="text-black title text-bold text-xl">{{'厂房租金'}} </text>
									</view>
								</view>
							</view>
							<scrollYBox styleText="height: 85vh;" @scrolltolower="loadMore" @handleRefresher="handleRefresher" :list="list">
								<template style="padding-bottom: 50rpx;">
									<view class="flex flex-direction box"  v-for="(item,index) in list" :key="index">
										<view class="row flex">
											<view class="item flex flex-direction">
												<view class="label">
													开始日期
												</view>
												<view class="val">
													{{item.strq}}
												</view>
											</view>
											<view class="item flex flex-direction">
												<view class="label">
													单价
												</view>
												<view class="val">
													{{item.dj}}
												</view>
											</view>
										</view>
										<view class="row flex">
											<view class="item flex flex-direction">
												<view class="label">
													结费面积
												</view>
												<view class="val">
													{{item.jfmj}}
												</view>
											</view>
											<view class="item flex flex-direction">
												<view class="label">
													币种
												</view>
												<view class="val">
													{{item.pz}}
												</view>
											</view>
										</view>
									</view>
								</template>
							</scrollYBox>
						</view>
					</template>
					
					<template v-if="type==4">
						<view>
							<view class="flex flex-direction box">
								<view class="title">
									<view class="" style="font-family: '宋体';">
										<text class="text-black title text-bold text-xl">{{'管理费设定'}} </text>
									</view>
								</view>
							</view>
							<scrollYBox styleText="height: 85vh;" @scrolltolower="loadMore" @handleRefresher="handleRefresher" :list="list">
								<template style="padding-bottom: 50rpx;">
									<view class="flex flex-direction box"  v-for="(item,index) in list" :key="index"> 
										<view class="row flex">
											<view class="item flex flex-direction">
												<view class="label">
													合同编号
												</view>
												<view class="val">
													{{item.ph}}
												</view>
											</view>
											<view class="item flex flex-direction">
												<view class="label">
													序号
												</view>
												<view class="val">
													{{item.cnt}}
												</view>
											</view>
										</view>
										<view class="row flex">
											<view class="item flex flex-direction">
												<view class="label">
													付款日期
												</view>
												<view class="val">
													{{item.cnt}}
												</view>
											</view>
											<view class="item flex flex-direction">
												<view class="label">
													行政管理费
												</view>
												<view class="val">
													{{item.grgl}}
												</view>
											</view>
										</view>
										<view class="row flex">
											<view class="item flex flex-direction">
												<view class="label">
													币种1
												</view>
												<view class="val">
													{{item.pz1}}
												</view>
											</view>
											<view class="item flex flex-direction">
												<view class="label">
													厂房管理费
												</view>
												<view class="val">
													{{item.cfgl}}
												</view>
											</view>
										</view>
										<view class="row flex">
											<view class="item flex flex-direction">
												<view class="label">
													计费面积
												</view>
												<view class="val">
													{{item.jfmj}}
												</view>
											</view>
											<view class="item flex flex-direction">
												<view class="label">
													币种2
												</view>
												<view class="val">
													{{item.pz2}}
												</view>
											</view>
										</view>
										<view class="row flex">
											<view class="item flex flex-direction">
												<view class="label">
													土地管理费
												</view>
												<view class="val">
													{{item.ttgl}}
												</view>
											</view>
											<view class="item flex flex-direction">
												<view class="label">
													计算标准
												</view>
												<view class="val">
													{{item.jsbz}}
												</view>
											</view>
										</view>
										<view class="row flex">
											<view class="item flex flex-direction">
												<view class="label">
													计算面积2
												</view>
												<view class="val">
													{{item.jfmj2}}
												</view>
											</view>
											<view class="item flex flex-direction">
												<view class="label">
													备注
												</view>
												<view class="val">
													{{item.pz}}
												</view>
											</view>
										</view>
									</view>
								</template>
							</scrollYBox>
						</view>
					</template>
									
				</view>
			
			
			
			
		</scroll-view>
	</view>

</template>

<script>
	export default {
		components:{
		 },
		data() {
			return {
				modalName: null,
				contractNumber: '',
				enterpriseName: '',
				refresherBool: false,
				listUrl:{
					1:'assets.leaseContract/dbHtb/listDbTtgmbByMainId',
					2:'assets.leaseContract/dbHtb/listDbTtfkByMainId',
					3:'assets.leaseContract/dbHtb/listDbCfzjbByMainId',
					4:'assets.leaseContract/dbHtb/listDbGlfb1ByMainId',
				},
				type: '',
				id :'',
				pageNo : 1,
				pageSize : 5,
				list: [],
				
			}
		},
		methods: {
			handleRefresher(){
				this.refresherBool = true
				setTimeout(()=>{
					this.refresherBool = false
				},1000)
				this.pageNo = 1
				this.getList()
			},
			loadMore(){
				if(this.total == this.list.length) return this.setMessage('没有更多了')
				this.pageNo++
				this.getList()
			},
			getList(){
				if(this.pageNo==1) this.list = []
				this.$http.get(this.listUrl[this.type],{params:{
					column: 'createTime', 
					order: 'desc', 
					pageNo: this.pageNo, 
					pageSize:this.pageSize,
					ph: this.id,
					}}).then(res=>{
						if(res.data.success){
							this.list = this.list.concat(res.data.result.records)
							this.total = res.data.result.total
						}
				})
			}
			
		},
		onLoad() {
			this.type = this.$Route.query.type
			this.id = this.$Route.query.id
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
	.title{
		margin: 10rpx;
	}
	.btn{
		width: 110rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #1890ff;
		border-radius: 8rpx;
		color: #fff;
	}
	.box{
		background-color: #fff;
		margin: 25rpx;
		border-radius: 8rpx;
		padding: 10rpx;
		.row{
			margin: 10rpx;
		}
	}
	.item{
		flex: 1;
	}
	.label{
		color: #969696;
	}
	.val{
		color: #353535;
		font-size: 32rpx;
	}
</style>
